<template>
	<!--兼容新版本组件跳转-->
	<qh-navigator :link='url' v-if="url.name">
		<slot></slot>
	</qh-navigator>
    <view @click.stop="diyClick()" v-else>
		<slot></slot>
    </view>
</template>

<script>
export default {
    data() {
        return {
            navigateUrl: '',
            form: {},
            userDefined: false,
            prevData: {
                diyDialog: {
                    url: 'openDialog?dialogId=',
                    value: '',
                    name: '开对话框',
                    method: 'openDialog'
                },
                closeDialog: {
                    url: 'closeDialog?dialogId=',
                    value: '',
                    name: '关对话框',
                    method: 'closeDialog'
                }
            }
        };
    },
    options: {
        multipleSlots: true // 在组件定义时的选项中启用多slot支持
    },
    /**
     * 组件的属性列表
     */
    props: {
        link: {
            type: [String,Object],
            default: ''
        },
        url: {
            type: [String, Object],
            default: ''
        },
        class: {
            type: [String],
            default: ''
        },
        style: {
            type: [String],
            default: ''
        },
        type: {
            type: [String],
            default: '0'
        }
    },
    watch: {
        link: {
            handler: function (n) {
                if (n) {
                    this.init();
                }
            },

            immediate: true,
            deep: true
        },
        url: {
            handler: function (n) {
                if (n) {
                    this.init();
                }
            },

            immediate: true,
            deep: true
        }
    },
    beforeMount() {
        this.init();
    },
    mounted() {},
    /**
     * 组件的方法列表
     */
    methods: {
        init() {
            let navigateUrl = this.link || this.url;
            navigateUrl = '' + navigateUrl;

            if (!navigateUrl) {
                return;
            }

            // console.log(this);

            if (this.form != '' && this.form.type == 'classification') {
                let classification_id = this.form.classValue;
                postData('getClassifyGoods', {
                    id: classification_id
                }).then((res) => {
                    if (res.code === 2001000) {
                        // 成功，返回这个用户所有的商品数据
                        this.setData({
                            navigateUrl: 'plugin-private://wx34345ae5855f892d/pages/categoryProductList/categoryProductList?categoryName=分类页面&productId=' + res.data
                        });
                    } else {
                        // 失败，给出提示
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                });
                return;
            }
            if (this.isJSON(navigateUrl)) {
                this.setData({
                    userDefined: true,
                    form: JSON.parse(navigateUrl)
                });
            } else {
                //  navigateUrl = navigateUrl.replace('wx9d384f1607927496','wx6e0f697084b877ad');
                const prevData = this.prevData;
                const flag = Object.keys(prevData).some((key) => {
                    if (navigateUrl.indexOf(prevData[key]['url']) + 1) {
                        // 将value 赋值为 链接剪切 url 剩余的参数部分，即设置的参数
                        const value = navigateUrl.replace(prevData[key]['url'], '');
                        this.setData({
                            userDefined: true,
                            form: {
                                type: key,
                                value: value,
                                method: prevData[key]['method']
                            }
                        });
                        return true;
                    }
                });

                if (!flag) {
                    this.setData({
                        navigateUrl
                    });
                }

                if (this.form != '' && this.form.type == 'classification') {
                    let classification_id = form.classValue;
                    postData('getClassifyGoods', {
                        id: classification_id
                    }).then((res) => {
                        if (res.code === 2001000) {
                            // 成功，返回这个用户所有的商品数据
                            this.setData({
                                navigateUrl: 'plugin-private://wx34345ae5855f892d/pages/categoryProductList/categoryProductList?categoryName=分类页面&productId=' + res.data
                            });
                        } else {
                            // 失败，给出提示
                            uni.showToast({
                                title: res.msg,
                                icon: 'none'
                            });
                        }
                    });
                }
            }
        },

        callback(e) {
            const myEventDetail = { ...e.detail }; // console.log('diy-img-callback',e,myEventDetail);

            this.$emit('callback', {
                detail: myEventDetail
            });
        },

        isJSON(str) {
            if (typeof str === 'string') {
                try {
                    const obj = JSON.parse(str);

                    if (typeof obj === 'object' && obj) {
                        return true;
                    } else {
                        return false;
                    }
                } catch (e) {
                    return false;
                }
            }
        },

        diyClick(e) {
			let navigateUrl = this.link || this.url;
			navigateUrl = '' + navigateUrl;
			
			if (!navigateUrl) {
			    return;
			}	
			const form = this.form;
			if(this.isJSON(navigateUrl)){
				switch (form.type) {
				    case 'phoneCall':
				        uni.makePhoneCall({
				            phoneNumber: form.phone //仅为示例，并非真实的电话号码
				        });
				        break;
				
				    case 'copy':
				        uni.setClipboardData({
				            data: form.copyValue,
							success() {
								// #ifdef MP-ALIPAY
								uni.showToast({
									title:"复制成功",
									icon:'none'
								})
								// #endif
							}
				        });
				        break;
				
				    case 'previewMedia':
						// #ifdef MP-WEIXIN
				        uni.previewMedia({
				            sources: [form.media]
				        });
						// #endif
						// #ifdef MP-ALIPAY
						if(form.media.type != "video"){
							uni.previewImage({
								urls: [form.media.url]
							});
						}
						// #endif
				        break;
				    default:
				        const prevData = this.prevData;
				        const flag = Object.keys(prevData).some((key) => {
				            if (form.type === key) {
				                // console.log('diy-navigator-form', form);
				                const myEventDetail = {
				                    event: e,
				                    method: form.method,
				                    data: form
				                };
				                this.$emit('callback', {
				                    detail: myEventDetail
				                });
				                return true;
				            }
				        });
				        break;
				}
			} else {
				uni.navigateTo({
					url: navigateUrl
				})
			}
        },

        toPath(e) {
            const url = e.currentTarget.dataset.url;
            uni.navigateTo({
                url: url,
                complete(res) {
                    console.log(res);
                }
            });
        },
        navigatorClick() {}
    }
};
</script>
<style>
@import './diy-navigator.css';
</style>
